<template>
    <div class="datalist">
        <el-row :gutter="0">
            <el-col :xs="0" :sm="3" :md="4" :lg="5" :xl="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
                <div class="grid-content bg-purple-light">
                    <el-container>
                        <el-container>
                            <el-container>
                                <el-main>
                                    <MainTabs />
                                    
                                </el-main>
                                <el-footer>Footer</el-footer>
                            </el-container>
                            <el-aside width="200px">Aside</el-aside>
                        </el-container>
                    </el-container>
                </div>
            </el-col>

            <el-col :xs="0" :sm="3" :md="4" :lg="5" :xl="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import MainTabs from 'comps/index/MainTabs.vue'

export default defineComponent({
    components:{
        MainTabs
    },
    setup() {


        return {}
    }
})
</script>

<style scoped>
.datalist{
    margin-top: 1rem;
}

.el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
    padding: 0 0.5rem 0 0.5rem;
}

body > .el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
</style>